<div class="row">
    <div class="col-md-12">
        <p-confirmDialog header="{{'confirm' | translate}}" icon="fa fa-question-circle" #cd>
            <p-footer>
                <button type="button" icon="fa-check" class="btn btn-primary btn-margin-1rem"
                    (click)="cd.accept()">{{'accept' | translate}}</button>
                <button type="button" icon="fa-close" class="btn btn-default"
                    (click)="cd.reject()">{{'reject' | translate}}</button>
            </p-footer>
        </p-confirmDialog>

        <form class="form-inline top-filter-form form-bgcolor " role="form">
            <div class="form-group btn-margin-1rem">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="button" (click)="newStaffForm()">
                    <i class="fa fa-user" aria-hidden="true"></i> {{'staffTable.newStaff' | translate}}
                </button>
            </div>
        </form>
        <div class="row">
            <div class="col-md-12 form-bgcolor col-padding">
                <div class="user-item-container">
                    <p-dataTable expandableRows="true" [value]="staffs" [rows]="10" [paginator]="true" [pageLinks]="3"
                        [rowsPerPageOptions]="[5,10,20]" dataKey="index">
                        <p-column expander="true" styleClass="col-icon" [style]="{'width':'50px'}"></p-column>
                        <p-column field="staffCode" header="{{'staffTable.staffCode' | translate}}"></p-column>
                        <p-column field="staffName" header="{{'personalInfo.name' | translate}}"></p-column>
                        <p-column field="gender" header="{{'personalInfo.sex' | translate}}"></p-column>
                        <p-column field="cellphone" header="{{'personalInfo.cellphone' | translate}}" [sortable]="true">
                        </p-column>
                        <p-column header="{{'operate' | translate}}" [style]="{'width':'80px','text-align':'center'}">
                            <ng-template let-item="rowData" pTemplate="body">
                                <button type="button" class="btn btn-primary"
                                    (click)="delStaff(item)">{{'delItem' | translate}}</button>
                            </ng-template>
                        </p-column>
                        <ng-template let-staff pTemplate="rowexpansion">
                            <div class="ui-grid ui-grid-responsive ui-fluid">
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-12">
                                        <div class="ui-grid ui-grid-responsive ui-grid-pad">
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">工号：</div>
                                                <div class="ui-grid-col-10">{{staff.staffCode}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">姓名：</div>
                                                <div class="ui-grid-col-10">{{staff.staffName}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">性别：</div>
                                                <div class="ui-grid-col-10">{{staff.gender}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">手机号：</div>
                                                <div class="ui-grid-col-10">{{staff.cellphone}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">职务：</div>
                                                <div class="ui-grid-col-10">{{staff.duty}}</div>
                                            </div>
                                            <div class="ui-grid-row">
                                                <div class="ui-grid-col-2">备注：</div>
                                                <div class="ui-grid-col-10">{{staff.remark}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </p-dataTable>
                </div>
            </div>
        </div>
    </div>
</div>